<template>
  <div class="padding-l-20 padding-r-20 padding-t-20 h-100 table-page">
    <log-component
      :data="data"
      :columns="columns"
      :loading="loading"
      :searchForm="searchForm"
      :total="total"
      :page="page"
      @onShowSizeChange="onShowSizeChange"
      @onChange="onPageChange"
    >
      <a-space>
        <a-input-search
          placeholder="请输入用户帐号"
          enter-button
          @search="
            page.currentPage = 1;
            getList(page, searchForm);
          "
          @pressEnter="
            page.currentPage = 1;
            getList(page, searchForm);
          "
          v-model="searchForm.createRealName"
        />
<!--        <a-select-->
<!--          class="_select"-->
<!--          v-model="searchForm.logType"-->
<!--          @change="-->
<!--            page.currentPage = 1;-->
<!--            getList(page, searchForm);-->
<!--          "-->
<!--        >-->
<!--          <a-select-option :key="item.key" v-for="item in typeArr">{{-->
<!--            item.name-->
<!--          }}</a-select-option>-->
<!--        </a-select>-->
        <date-group-picker
          @onStartDateChange="onDateChange"
          @onEndDateChange="onDateChange"
        ></date-group-picker>
          <a-button
                  class="nbcs-btn nbcs-btn-search position-r"
                  @click="getList(page, searchForm)"
          >查询</a-button>
      </a-space>
    </log-component>
  </div>
</template>

<script>
import LogComponent from "@/components/log/logComponent";
import DateGroupPicker from "@/components/basic/DateGroupPicker";
import { operateLog } from "@/services/log";
export default {
  name: "operateLog",
  components: { LogComponent, DateGroupPicker },
  data() {
    return {
      loading: false,
      data: [],
      columns: [
          { title: "#", width: 100, dataIndex: "id", key: "#" },
          {
              title: '设备名称',
              dataIndex: 'deviceName',
              scopedSlots: { customRender: 'deviceName' },
          },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" },
          defaultSortOrder: "descend",
          sorter: (a, b) => (a.createTime - b.createTime ? 1 : -1),
        },
          {
              title: "设备状态",
              dataIndex: 'type',
              scopedSlots: { customRender: 'type' },
          },

        // {
        //   title: "事件类型",
        //   dataIndex: "logType",
        //   customRender: text => {
        //     if(text == 1){
        //       return '用户'
        //     } else if(text == 2){
        //       return '角色'
        //     } else if(text == 3){
        //       return '集团'
        //     } else if(text == 4){
        //       return '设备'
        //     }
        //   }
        // },

      ],
      searchForm: {
        createRealName: "",
        logType: "",
        beginTime: "",
        endTime: "",
      },
      page: {
        currentPage: 1, //分页
        pageSize: 20, // 默认每页显示数量
      },
      total: 0,
      typeArr: [
        { key: "", name: "事件类型（全部）" },
        { key: "1", name: "用户" },
        { key: "2", name: "角色" },
        { key: "3", name: "集团" },
        { key: "4", name: "设备" },
      ],
    };
  },
  created() {
    this.getList(this.page);
  },
  methods: {
    onShowSizeChange(data) {
      this.page.currentPage = data.page;
      this.page.pageSize = data.pageSize;
      this.getList(this.page);
    },
    onPageChange(data) {
      this.page.currentPage = data.page;
      this.getList(this.page);
    },
    getList(page, params) {
      operateLog(
        Object.assign(
          {
            page: page.currentPage,
            pageSize: page.pageSize,
          },
          params,
          this.searchForm
        )
      ).then((res) => {
        if (res.data.code === 0) {
          this.data = res.data.data.list;
          this.total = res.data.data.totalRow;
        }
      });
    },
    onDateChange(date) {
      console.log(this.searchForm);
      if(date.startDate && date.endDate){
        this.searchForm.beginTime = date.startDate + " 00:00:00";
        this.searchForm.endTime = date.endDate + " 23:59:59";
      } else{
        this.searchForm.beginTime = date.startDate;
        this.searchForm.endTime = date.endDate;
      }
      this.page.currentPage = 1;
      this.getList(this.page, this.searchForm);
    },

  },
};
</script>

<style lang="less" scoped>
._select {
  width: 180px;
}
</style>
